<template>
  <el-tabs :tab-position="tabPosition" style="height: 100%" class="demo-tabs">
    <el-tab-pane label="容器">
      <draggable
        class="cardItem"
        :list="regionType"
        :group="{ name: 'form', pull: 'clone', put: false }"
        item-key="name"
        :clone="clone"
        @start="drag = true"
        @end="drag = false"
      >
        <template #item="{ element }">
          <el-card class="dra-card" style="cursor: move; margin: 10px">
            <el-icon :size="14">
              <component :is="element.icon" />
            </el-icon>
            {{ element.title }}
          </el-card>
        </template>
      </draggable>
    </el-tab-pane>
    <el-tab-pane label="表单控件">
      <draggable
        class="cardItem"
        :list="formType"
        :group="{ name: 'form', pull: 'clone', put: false }"
        item-key="name"
        :clone="clone"
        @start="drag = true"
        @end="drag = false"
      >
        <template #item="{ element }">
          <el-card class="dra-card" style="cursor: move; margin: 10px">
            <el-icon :size="14">
              <component :is="element.icon" />
            </el-icon>
            {{ element.title }}
          </el-card>
        </template>
      </draggable>
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts">
export default {
  name: 'draggableComponent'
}
</script>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import draggable from 'vuedraggable'
import formType from '../../config/formsDict'
import regionType from '../../config/regionDict'
import { type Basis } from '@/types/element'
import type { TabsInstance } from 'element-plus'
const tabPosition = ref<TabsInstance['tabPosition']>('left')

const drag = ref(false)

// 克隆组件
function clone(obj: Basis) {
  let cloneCp = reactive(JSON.parse(JSON.stringify(obj)))
  cloneCp.field = getId()
  return cloneCp
}

// 获取随机ticks作为id
function getId() {
  return (
    (Math.floor(Math.random() * (99999 - 10000)) + 10000).toString() +
    new Date().getTime().toString().substring(5)
  )
}
</script>

<style lang="scss" scoped>
.cardItem {
  position: relative;
  animation: cardIn 1s;
  -webkit-animation: cardIn 1s;
}

@keyframes cardIn {
  0% {
    top: -10px;
  }

  100% {
    top: 0;
  }
}
</style>
